<template>
  <div class="link-buttons-container">
    <!-- 标题 -->
    <h2 class="link-buttons-title">常用链接</h2>

    <!-- 自定义跳转按钮列表 -->
    <div class="link-buttons">
      <CustomLinkButton
        v-for="(link, index) in linkButtons"
        :key="index"
        :label="link.label"
        :meta="link.meta"
        :url="link.url"
      />
    </div>
  </div>
</template>

<script>
import CustomLinkButton from '@/components/button/CustomLinkButton.vue'

export default {
  name: 'OperationRecords',
  components: {
    CustomLinkButton
  },
  data() {
    return {
      linkButtons: [
        {
          label: 'bilibili',
          meta: 'https://img2.baidu.com/it/u=1834596270,1982359325&fm=253&fmt=auto&app=138&f=JPEG?w=760&h=304', // bilibili 图标 URL
          url: 'https://www.bilibili.com/video/BV1Ww4m1e7D6/?spm_id_from=333.999.0.0'
        },
        {
          label: '知识星球',
          meta: 'https://img0.baidu.com/it/u=1721085789,2018741703&fm=253&fmt=auto?w=800&h=443', // 知识星球 图标 URL
          url: 'https://wx.zsxq.com/group/51111185811244'
        },
        {
          label: '微信号',
          meta: 'https://img2.baidu.com/it/u=2225746989,220112763&fm=253&fmt=auto&app=120&f=JPEG?w=911&h=504', // 微信 图标 URL
          url: 'https://mp.weixin.qq.com/s/IepVzj-zmiiS-vZ2KSWEwA?token=1214359744&lang=zh_CN'
        }
      ]
    }
  }
}
</script>

<style scoped>
/* 容器样式 */
.link-buttons-container {
  padding: 5px;
}

/* 标题样式 */
.link-buttons-title {
  font-size: 16px;
  font-weight: bold;
  color: #4caf50; /* 绿色标题 */
  text-align: left;
  margin-top: 0;
  margin-left: 0;
  margin-bottom: 16px;
}

/* 按钮容器样式 */
.link-buttons {
  display: flex;
  justify-content: space-between; /* 按钮之间的间距 */
  align-items: center;
  flex-wrap: wrap; /* 自动换行 */
  gap: 5px; /* 控制按钮之间的距离 */
}
</style>
